<script setup lang="ts">
import { ref, reactive, onUnmounted } from 'vue'
import { onLoad, onShow, onHide, onUnload } from '@dcloudio/uni-app'
import { apiGradeList, getVipInfo } from '@/apis/user';
import { calculateAge, router, toast } from "@/utils/tools";
import { collectionUpdate, collectionInfo, getAccessToken, getCardInfo, getCardAdd, getCardEdit } from "@/apis/my";
import { apiComfirmOrder, wxPayMiniAppPay } from '@/apis/order';
import {
  defaultSetting
} from "@/apis/login";
let bgColor = ref('#3F3A4E')
let infoId = ref('')
const list = reactive([])
let gradeList = ref([]);
const modalVip = ref()
const background = ref(['color1', 'color2', 'color3'])
const indicatorDots = ref(false)
const autoplay = ref(false)
const interval = ref(2000)
const duration = ref(500)
const checkedqy = ref(false)
const checkValue = ref([])
const currentIndex: any = ref(0)
const infoText = ref('')
const priceMoney = ref(0)
const depositMoney = ref(0)
const state = ref()
const cardRzShow = ref(false)
const couponId = ref()
const couponMoney = ref(0)
const shopVip = ref(0)
// const appShop = reactive({
//   // 会员id
//   shopGradeId:null,
//   // 会员名称
//   shopGrade:null,
//   // 1-开会员 2 升级会员
//   type:1,
// })
const appShop = reactive({
  id: null,
  shopName: null,
  shopIllustrate: null,
  shopGrade: null,
  shopGradeId: null,
  // 1-新增会员  2-升级会员  3-会员续费
  type: 1,
})
const shoppingId = ref()
const num = ref()
const price = ref()
const vipSort = ref(null)
const vipType = ref(null)

const vipMemberOpen = ref(null)
const disabledVip = ref(false)
const vipOpenName = ref('开通会员')
const changePrice = ref(0)
const changeDeposit = ref(0)
const agreement2 = ref(null)
const leftClick = () => {
  uni.navigateBack()
}
// const getFGradeList = async () => {
//   let res = await apiGradeList();
//   if(res.data&&res.data.length>0) {
//     res.data.forEach((item:any) => {
//       if(item.id==infoId.value) {
//         infoText.value = item.content
//       }
//     })
//   }
// }
const getFGradeList = async () => {
  let res = await apiGradeList();
  gradeList.value = res.data;
  let index = currentIndex.value
  let dataIndex = gradeList.value[index]
  infoText.value = dataIndex.content
  priceMoney.value = dataIndex.price
  depositMoney.value = dataIndex.deposit
}

// 查询个人会员详情信息
const getVipInfoFn = async () => {
  let res = await getVipInfo();
  if (res.data.shopVip === 0) {
    appShop.type = 1
  } else {
    shopVip.value = res.data.shopVip
    // appShop.type = 2
  }
}

// 支付接口 start
const comfirmOrder = async () => {
  let params = {
    commodityId: null, //商品ID
    commodityName: null, //商品的标题名称
    actualPayment: null, //支付价格
    userAddressId: null, //发货地址ID
    type: 0, //消费类型  0-开会员  1-开商铺  2-购买商品  3-藏品认证  4-评价费用
    activitiesId: null, //评选活动Id
    appCommodityList: null, // 4评价活动的时候传
    collectionCertificationList: null, // 3藏品认证的时候传
    appShop: appShop,
    userCouponId: couponId.value, // 优惠券ID
  };
  // let res = await apiComfirmOrder(params);
  // if (res.code == 200) {
  //     shoppingId.value = res.data.shopingId
  //     num.value =res.data.num
  //     price.value =res.data.price
  //     // priceMoney.value = res.data.price
  //     wxPayMiniAppPayFn()
  // }
  await wxPayMiniAppPayFn(params)
}

const wxPayMiniAppPayFn = async (params: any) => {
  let res = await wxPayMiniAppPay(params)
  if (res.code == 200) {
    if (res.code == 200) {
      let dataObj = res.data;
      wx.openEmbeddedMiniProgram({
        appId: dataObj.appId,
        path: dataObj.path,
        envVersion: 'release',//正常跳转路径
        success(res) {
          uni.setStorageSync('isPaySuccess', true)
        }
      })
    }
  }
}

const changeIndicatorDots = (e: any) => {
  indicatorDots.value = !indicatorDots.value
}
const changeAutoplay = (e: any) => {
  autoplay.value = !autoplay.value
}
const intervalChange = (e: any) => {
  interval.value = e.target.value
}
const durationChange = (e: any) => {
  duration.value = e.target.value
}

const onSwiperChange = (e: any, source: any) => {
  currentIndex.value = e.detail.current; // 更新当前索引
  let index = currentIndex.value
  let dataIndex = gradeList.value[index]
  infoText.value = dataIndex.content
  // priceMoney.value = dataIndex.price
  // depositMoney.value = dataIndex.deposit

  changePrice.value = dataIndex.price
  changeDeposit.value = dataIndex.deposit
  // 续费会员 不需要缴纳押金
  vipMemberOpen.value = dataIndex.vip
  // if(dataIndex.vip!=null){
  //   depositMoney.value = 0
  // }

  // 升级降级
  // if((vipType.value==dataIndex.type && vipSort.value>dataIndex.sort)||(vipType.value>dataIndex.type && vipSort.value>=dataIndex.sort)){
  // }
  // if(vipType.value >= dataIndex.type && vipSort.value>=dataIndex.sort){
  // }
  if (vipType.value === dataIndex.type && vipSort.value === dataIndex.sort) {
    appShop.type = 3
    disabledVip.value = false
    vipOpenName.value = "续费会员"
    // 续费会员 不需要缴纳押金
    depositMoney.value = 0
    priceMoney.value = dataIndex.price
  }
  // if(vipType.value === dataIndex.type && vipSort.value<dataIndex.sort){
  // }
  // if(vipType.value > dataIndex.type && vipSort.value<=dataIndex.sort){
  // }
  // if(vipType.value > dataIndex.type && vipSort.value>dataIndex.sort){
  // }

  // 先判断是个人会员还是店铺会员 type 0-个人会员  1-开商铺
  if (vipType.value === 0 && vipType.value === dataIndex.type) {
    if (vipSort.value < dataIndex.sort) {
      appShop.type = 2
      disabledVip.value = false
      vipOpenName.value = "升级会员"
      depositMoney.value = dataIndex.deposit
      priceCalculation()
    }
    if (vipSort.value > dataIndex.sort) {
      disabledVip.value = true
      toast("会员暂不支持降级，如有疑问请联系客服解答");
      vipOpenName.value = "开通会员"
    }
  }
  if (vipType.value === 1 && vipType.value === dataIndex.type) {
    if (vipSort.value < dataIndex.sort) {
      appShop.type = 2
      disabledVip.value = false
      vipOpenName.value = "升级会员"
      depositMoney.value = dataIndex.deposit
      priceCalculation()
    }
    if (vipSort.value > dataIndex.sort) {
      toast("会员暂不支持降级，如有疑问请联系客服解答");
      disabledVip.value = true
      vipOpenName.value = "开通会员"
    }
  }
  // 个人会员滑动到店铺会员
  if (vipType.value === 0 && vipType.value < dataIndex.type) {
    if (vipSort.value < dataIndex.sort) {
      appShop.type = 2
      disabledVip.value = false
      vipOpenName.value = "升级会员"
      depositMoney.value = dataIndex.deposit
      priceCalculation()
    }
    if (vipSort.value > dataIndex.sort) {
      appShop.type = 2
      disabledVip.value = false
      vipOpenName.value = "升级会员"
      depositMoney.value = dataIndex.deposit
      priceCalculation()
    }
    if (vipSort.value === dataIndex.sort) {
      appShop.type = 2
      disabledVip.value = false
      vipOpenName.value = "升级会员"
      depositMoney.value = dataIndex.deposit
      priceCalculation()
    }
  }
  // 店铺会员滑动到个人会员
  if (vipType.value === 1 && vipType.value > dataIndex.type) {
    if (vipSort.value < dataIndex.sort) {
      toast("会员暂不支持降级，如有疑问请联系客服解答");
      disabledVip.value = true
      vipOpenName.value = "开通会员"
    }
    if (vipSort.value > dataIndex.sort) {
      toast("会员暂不支持降级，如有疑问请联系客服解答");
      disabledVip.value = true
      vipOpenName.value = "开通会员"
    }
    if (vipSort.value === dataIndex.sort) {
      toast("会员暂不支持降级，如有疑问请联系客服解答");
      disabledVip.value = true
      vipOpenName.value = "开通会员"
    }
  }
}
const switchPrev = () => {
  if (currentIndex.value > 0) {
    currentIndex.value = --currentIndex.value; // 通过改变current，自动切换
  } else {
    currentIndex.value = 5
  }
}
const switchNext = () => {
  if (currentIndex.value < 5) {
    currentIndex.value = ++currentIndex.value; // 通过改变current，自动切换
  } else {
    currentIndex.value = 0
  }
}
const priceCalculation = () => {
  // 年费
  const oldPrice = uni.getStorageSync('oldPrice')
  // 押金
  const oldDeposit = uni.getStorageSync('oldDeposit')

  let newPrice = parseFloat(changePrice.value - oldPrice).toFixed(2)
  let newDeposit = parseFloat(changeDeposit.value - oldDeposit).toFixed(2)
  priceMoney.value = newPrice <= 0 ? 0 : newPrice
  depositMoney.value = newDeposit <= 0 ? 0 : newDeposit
  // let aaa = parseFloat((Number(newPrice)+Number(newDeposit))).toFixed(2)
}
const changeqy = (e: any) => {
  checkValue.value = e.detail.value
}
const personalVipOpen = () => {
  if (!checkValue.value.length) {
    toast('请选择会员服务协议！');
    return
  }
  if (cardRzShow.value === false) {
    // toast('请先进行实名认证！');
    modalVip.value.open()
    // uni.navigateTo({
    //   url:'/pagesMy/user/page/realNameAuthentication'
    // })
    return
  }
  if (cardRzShow.value === true) {
    // toast('实名认证通过！');
    let index = currentIndex.value
    let dataIndex = gradeList.value[index]
    appShop.shopGradeId = dataIndex.sort
    appShop.shopGrade = dataIndex.type
    // if(shopVip.value > dataIndex.id){
    //   return toast("会员暂不支持降级，如有疑问请联系客服解答");
    // }
    // if(priceMoney.value-couponMoney.value<=0){
    //   return toast("支付金额不能小于等于0元！");
    // }
    if (parseFloat((priceMoney.value - couponMoney.value) + depositMoney.value).toFixed(2) <= 0) {
      return toast("支付金额不能小于等于0元！");
    }
    comfirmOrder()
  }
}
// 实名认证查询
const getCardInfoFn = async () => {
  let res = await getCardInfo();
  // if(res.code === 500){
  //   // toast(res.msg);
  //   cardRzShow.value = false
  // }else{
  //   cardRzShow.value = true
  //   state.value = res.data.state //0-待审核  1-审核已通过 2-审核失败
  // }
  if (res.code === 200) {
    // 0-待审核  1-审核已通过 2-审核失败
    state.value = res.data.state
    if (state.value != 1) {
      cardRzShow.value = false
    } else {
      cardRzShow.value = true
    }
  }
}
const couponGo = () => {
  // router('/pagesMy/member/coupon-deduction')
  uni.navigateTo({
    url: `/pagesMy/member/coupon-deduction`
  })
}
const confirm = () => {
  uni.navigateTo({
    url: '/pagesMy/user/page/realNameAuthentication'
  })
  modalVip.value.close()
}
const cancel = () => {
  modalVip.value.close()
}
const vipChange = (type: any) => {
  let url: any = '';
  let links: any = '';
  if (type === 1) {
    // 用户服务协议
    links = agreement2.value;
    url = `/pages/login/agreement?title=会员服务协议&links=${links}`;
  }


  switch (uni.getSystemInfoSync().platform) {
    case 'android':
      // 这里直接调用原生的方法，我们上面定义的
      // #ifdef MP-WEIXIN

      uni.downloadFile({
        url: links,
        success: function (res) {
          var filePath = res.tempFilePath;
          uni.openDocument({
            filePath: filePath,
            showMenu: true,
            success: function (res) {
            }
          });
        }
      });
      // #endif
      break;
    case 'ios':
      //这里跳转web-view页面
      uni.navigateTo({
        url: url
      });
      break;
    default:
      uni.navigateTo({
        url: url
      });
      break;
  }
}

const vipFilter = async () => {
  let list = gradeList.value
  for (let i = 0; i < list.length; i++) {
    if (list[i].vip != null) {
      vipMemberOpen.value = list[i].vip
      currentIndex.value = i
      vipSort.value = list[i].sort
      vipType.value = list[i].type
      priceMoney.value = list[i].price
      // depositMoney.value = list[i].deposit
      vipOpenName.value = "续费会员"
      // 续费会员不需要缴押金
      depositMoney.value = 0
      appShop.type = 3
      // 年费
      const oldPrice = list[i].price
      uni.setStorageSync('oldPrice', oldPrice)
      // 押金
      const oldDeposit = list[i].deposit
      uni.setStorageSync('oldDeposit', oldDeposit)
    }
  }
}
const getDefaultSetting = async () => {
  let res = await defaultSetting({});
  if (res.code === 200) {
    agreement2.value = res.data.agreement2
  }
}
onLoad((option: any) => {
  getCardInfoFn();
  // getFGradeList();
})
onShow(async () => {
  getDefaultSetting()
  getVipInfoFn();
  couponId.value = uni.getStorageSync('couponId') ? uni.getStorageSync('couponId') : ''
  couponMoney.value = uni.getStorageSync('couponMoney') ? uni.getStorageSync('couponMoney') : 0
  await getFGradeList();
  await vipFilter()
});
onHide(async () => {
})
onUnload(async () => {
  uni.setStorageSync('currentIndex', null)
  uni.removeStorageSync('couponId');
  uni.removeStorageSync('couponMoney');
  uni.removeStorageSync('oldPrice');
  uni.removeStorageSync('oldDeposit');
})
onUnmounted(() => {
  // 清理操作，如取消定时器、移除事件监听器等
  uni.setStorageSync('currentIndex', null)
  uni.removeStorageSync('couponId');
  uni.removeStorageSync('couponMoney');
  uni.removeStorageSync('oldPrice');
  uni.removeStorageSync('oldDeposit');
});
</script>

<template>
  <view class="container-wrap">
    <view class="card-list">
      <uv-navbar title="会员等级" @leftClick="leftClick" :bgColor="bgColor" leftIconColor="#fff"
        :titleStyle="{ color: '#fff' }" :fixed="false"></uv-navbar>
      <view class="uv-demo-block">
        <!-- <view class="arrow-lft" @click="switchPrev"> -->
        <!-- <uv-icon name="arrow-left" color="#d8dae0" size="40"></uv-icon> -->
        <!-- </view> -->
        <!-- <view class="arrow-right" @click="switchNext"> -->
        <!-- <uv-icon name="arrow-right" color="#d8dae0" size="40"></uv-icon> -->
        <!-- </view> -->
        <!-- <view></view> -->
        <view class="uni-margin-wrap">
          <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
            :duration="duration" @change="onSwiperChange" :current="currentIndex" previous-margin="30" next-margin="30">
            <swiper-item v-for="(item, index) in gradeList" :key="index">
              <view class="swiper-box">
                <view class="dont-vip" v-if="item.vip">已开通</view>
                <view class="dont-vip" v-else>未开通</view>
                <view class="swiper-vip">{{ item.name }}</view>
                <view class="swiper-date" v-if="item.dueDate">{{ item.dueDate }}到期</view>
                <view :class="['ktong',{'white-text':item.name=='VIP3店铺'}]">
                  <view>会员年费：￥{{ item.price }}/年</view>
                  <view class="vip-yj">会员押金：￥{{ item.deposit }}</view>
                </view>
                <view class="swiper-img">
                  <image :src="item.images" class="bg-box" />
                </view>
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>
      <!-- 会员权益 -->
      <view class="vip-qy">
        <view class="vip-title">会员权益</view>
        <rich-text :nodes="infoText"></rich-text>
      </view>
    </view>
    <!-- 开通 -->
    <view class="kt-wrap">
      <view class="coupon-select" @click="couponGo">
        <view class="couppn-lft">
          <view class="couppn-img">
            <image src="@/static/images/couppnicon.png" class="bg-box" />
          </view>
          <view class="coupon-title">优惠券</view>
        </view>
        <view class="coupon-rht">
          <view class="coupon-money">-¥{{ couponMoney }}</view>
          <view>
            <uv-icon name="arrow-right" size="12"></uv-icon>
          </view>
        </view>
      </view>
      <view class="vip-btn">
        <view class="kt-lft">
          <view class="kt-lft-money">
            <text class="fh">¥</text>
            <text class="num-money">
              <!-- {{priceMoney-couponMoney}} -->
              {{ parseFloat((Number(priceMoney) - Number(couponMoney)) + Number(depositMoney)).toFixed(2) }}
              <!-- {{parseFloat((priceMoney-couponMoney)).toFixed(2)}} -->
            </text>
          </view>
          <view class="yhq">优惠券已抵扣 {{ couponMoney }}元</view>
        </view>
        <!-- <view class="kt-rit" @click="personalVipOpen" v-if="vipMemberOpen==null">开通会员</view>
        <view class="kt-rit" @click="personalVipOpen" v-if="vipMemberOpen!=null">续费会员</view> -->
        <view class="kt-rit">
          <button class="btn" :disabled="disabledVip" :class="disabledVip ? 'disabledActive' : ''"
            @click="personalVipOpen">
            <!-- 续费会员 -->
            {{ vipOpenName }}
          </button>
        </view>
      </view>
      <view class="check-xy">
        <view>
          <checkbox-group @change="changeqy">
            <label>
              <checkbox value="1" :checked="checkedqy" />
            </label>
          </checkbox-group>
        </view>
        <view>开通前请阅读</view>
        <view class="vipxy" @click="vipChange(1)">《会员服务协议》</view>
      </view>
    </view>
  </view>
  <uv-modal ref="modalVip" title="" @confirm="confirm" @cancel="cancel" showCancelButton confirmColor="#C7452F">
    <view class="slot-content">
      <view>
        开通会员需先进行实名认证
      </view>
    </view>
  </uv-modal>
</template>

<style lang="scss" scoped>
.container-wrap {
  background: #fff;
  position: relative;
  height: 100vh;
}

.swiper-box {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 60rpx;
}

.card-list {
  height: calc(100vh - 300rpx);
  overflow-y: scroll;
  overflow-x: hidden;
  background: #fff;
}

.uv-demo-block {
  // margin: 50rpx 60rpx 58rpx 60rpx;
  margin: 50rpx 0 58rpx 0;
  position: relative;

  .arrow-lft {
    position: absolute;
    left: -50rpx;
    top: 50%;
    width: 50rpx;
    height: 50rpx;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .arrow-right {
    position: absolute;
    right: -50rpx;
    top: 50%;
    width: 50rpx;
    height: 50rpx;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.uni-margin-wrap {
  width: 100%;
}

.swiper {
  height: 400rpx;
  position: relative;
}

.swiper-item {
  display: block;
  height: 400rpx;
  width: 100%;
  // line-height: 300rpx;
  // text-align: center;
}

.swiper-list {
  margin-top: 40rpx;
  margin-bottom: 0;
}

.uni-common-mt {
  margin-top: 60rpx;
  position: relative;
}

.info {
  position: absolute;
  right: 20rpx;
}

.uni-padding-wrap {
  width: 550rpx;
  padding: 0 100rpx;
}

.swiper-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 96%;
  height: 100%;
  // box-shadow: 0px 10px 5px #0000;
}

.swiper-vip {
  position: absolute;
  left: 30rpx;
  top: 160rpx;
  z-index: 10;
  font-weight: bold;
  font-size: 60rpx;
  color: #30597A;
}

.ktong {
  position: absolute;
  left: 30rpx;
  bottom: 30rpx;
  z-index: 10;
  font-weight: bold;
  font-size: 24rpx;
  color: #30597A;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .vip-yj {
    margin-left: 40rpx;
  }
}

.white-text {
  color: #fff;
}

.swiper-date {
  position: absolute;
  left: 30rpx;
  z-index: 10;
  bottom: 100rpx;
  font-weight: bold;
  font-size: 24rpx;
  color: #30597A;
}

.dont-vip {
  // background:rgba(0,0,0, 0.5);
  background: #ce9454;
  padding: 12rpx 16rpx;
  font-size: 20rpx;
  position: absolute;
  left: 0;
  top: 74rpx;
  z-index: 10;
  color: #fff;
  border-top-left-radius: 20rpx;
  border-bottom-right-radius: 20rpx;
}

.vip-qy {
  margin: 40rpx 60rpx;
}

.vip-title {
  font-weight: bold;
  font-size: 36rpx;
  color: #000000;
}

.vip-btn {
  margin: 0rpx 60rpx;
  font-weight: 500;
  font-size: 32rpx;
  color: #FFFFFF;
  background: linear-gradient(101deg, #333333 0%, #010101 100%);
  box-shadow: 0rpx 6rpx 15rpx 0rpx rgba(0, 0, 0, 0.5);
  border-radius: 50rpx;
  text-align: center;
  // padding: 33rpx 0;
  display: flex;

  .kt-lft {
    flex: 1;
    padding: 14rpx 0 14rpx 50rpx;
    text-align: left;

    .kt-lft-money {
      .fh {
        font-size: 30rpx;
      }

      .num-money {
        font-size: 40rpx;
      }
    }

    .yhq {
      font-size: 20rpx;
    }
  }

  .kt-rit {
    width: 258rpx;
    // background: linear-gradient( 101deg, #FF5033 0%, #E43011 100%);
    // border-top-right-radius: 50rpx;
    // border-bottom-right-radius: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 32rpx;

    .btn {
      background: linear-gradient(101deg, #FF5033 0%, #E43011 100%);
      border-top-right-radius: 50rpx;
      border-bottom-right-radius: 50rpx;
      width: 100%;
      color: #FFFFFF;
      height: 100%;
    }
  }
}

.check-xy {
  margin: 30rpx 60rpx;
  display: flex;
  align-items: center;
}

.kt-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

/* #ifdef H5 */
::v-deep uni-checkbox .uni-checkbox-input {
  border-radius: 50%;
  width: 36rpx;
  height: 36rpx;
  border: 1rpx solid #cccccc;
}

/* #endif */
/* 微信样式 */
/* #ifdef APP-PLUS ||MP-WEIXIN */

::v-deep checkbox .wx-checkbox-input {
  border-radius: 50%;
  width: 36rpx;
  height: 36rpx;
  border: 1rpx solid #cccccc;
}

::v-deep .wx-checkbox-input .wx-checkbox-input-checked {
  border: none !important;
}

/* #endif */
.coupon-select {
  background: #FFF3F1;
  border-radius: 16rpx;
  padding: 28rpx 22rpx;
  margin: 0rpx 60rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-bottom: 80rpx;
  position: absolute;
  width: 84%;
  z-index: -1;
  bottom: 160rpx;
}

.couppn-img {
  width: 32rpx;
  height: 32rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.couppn-lft,
.coupon-rht {
  display: flex;
  align-items: center;
}

.coupon-title {
  margin-left: 16rpx;
  font-weight: bold;
  font-size: 24rpx;
  color: #000000;
}

.coupon-money {
  font-weight: bold;
  font-size: 24rpx;
  color: #E43012;
  margin-right: 8rpx;
}

::v-deep .wx-checkbox-input.wx-checkbox-input-checked {
  background-color: #C7452F !important;
  border-color: #C7452F !important;
  color: #ffffff !important;
}

::v-deep .uni-checkbox-input.uni-checkbox-input-checked {
  background-color: #C7452F !important;
  border-color: #C7452F !important;
  color: #ffffff !important;
}

.vipxy {
  font-weight: bold;
  margin-left: 10rpx;
}

.disabledActive {
  background: #929292 !important;
}
</style>
